<template>
    <div class="row">
        <ul class="todo-main">
            <Item v-for="todo in todoList" :key="todo.id" :todoObj="todo" :updateDone="updateDone" :deleteTodo="deleteTodo"/>
        </ul>
    </div>
</template>

<script>
    import Item from "./Item";
    export default {
        name: "List",
        components: {
            Item
        },
        props: ["todoList", "updateDone", "deleteTodo"],

        mounted() {
            console.log(this);
        }
    }
</script>

<style scoped lang="less">
    /* main */
    .row {
        .todo-main {
            margin-left: 0px;
            border: 1px solid #ddd;
            border-radius: 2px;
            padding: 0px;
            list-style: none;
        }
        .todo-empty {
            height: 40px;
            line-height: 40px;
            border: 1px solid #ddd;
            border-radius: 2px;
            padding-left: 5px;
            margin-top: 10px;
        }
    }
</style>